<template>
  <div class="flex">
    <aCard title="基本用法">
      <a-switch />
    </aCard>
    <aCard title="开关类型">
      <a-switch />
      <a-switch type="round" />
      <a-switch type="line" />
    </aCard>
    <aCard title="开关尺寸">
      <a-switch />
      <a-switch size="small" />
    </aCard>
    <aCard title="禁用状态">
      <a-switch disabled />
      <a-switch :default-checked="true" disabled />
      <a-switch type="round" disabled />
      <a-switch :default-checked="true" type="round" disabled />
      <a-switch type="line" disabled />
      <a-switch :default-checked="true" type="line" disabled />
    </aCard>
    <aCard title="自定义开关的颜色">
      <a-switch checked-color="#F53F3F" unchecked-color="#14C9C9" />
    </aCard>
    <aCard title="自定义开关的值">
      <a-switch v-model="value" checked-value="yes" unchecked-value="no" />
      <div>Current Value: {{ value }}</div>
    </aCard>
    <aCard title="自定义文案">
      <a-switch checked-text="on" unchecked-text="OFF"> </a-switch>
      <a-switch type="round" checked-text="on" unchecked-text="OFF"> </a-switch>
    </aCard>
    <aCard title="切换拦截">
      <a-switch :before-change="handleChangeIntercept" />
      <a-switch type="round" :before-change="handleChangeIntercept2" />
      <a-switch type="line" :before-change="handleChangeIntercept3" />
    </aCard>
    <aCard title="加载中状态">
      <a-switch loading />
      <a-switch type="round" loading />
      <a-switch type="line" loading />
    </aCard>
    <aCard title="自定义图标">
      <a-switch>
        <template #checked-icon>
          <a-icon name="xihuan"></a-icon>
        </template>
        <template #unchecked-icon>
          <a-icon name="DIYcanba"></a-icon>
        </template>
      </a-switch>
      <a-switch type="round">
        <template #checked-icon>
          <a-icon name="DIYcanba"></a-icon>
        </template>
        <template #unchecked-icon>
          <a-icon name="DIYcanba"></a-icon>
        </template>
      </a-switch>
      <a-switch type="line">
        <template #checked-icon>
          <a-icon name="DIYcanba"></a-icon>
        </template>
        <template #unchecked-icon>
          <a-icon name="DIYcanba"></a-icon>
        </template>
      </a-switch>
    </aCard>
  </div>
</template>

<script setup lang="ts">
import aCard from "@/ArcoUni/components/arco-card/index.vue";
import aSwitch from "@/ArcoUni/components/arco-switch/index.vue";
import aIcon from "@/ArcoUni/components/arco-icon/index.vue";
import { ref } from "vue";
const value = ref("");
const handleChangeIntercept = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return true;
};

const handleChangeIntercept2 = async (newValue) => {
  await new Promise((resolve) => setTimeout(resolve, 500));
  if (!newValue) {
    // Message.error("OH, You can't change");
    return false;
  }
  return true;
};

const handleChangeIntercept3 = async () => {
  await new Promise((_, reject) =>
    setTimeout(() => {
      // Message.error("OH, Something went wrong");
      reject();
    }, 1000),
  );
  return true;
};
</script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  //   background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}

:deep(.arco-tag) {
  margin: 15rpx 10rpx;
}
</style>
